<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>

<h:body>
	<ui:composition template="/XHTML/CommonColumnsContent.xhtml">
		<ui:define name="header">
			<ui:include src="/WEB-INF/facelets/header.jspx" />
		</ui:define>
		<br />
		<br />

		<ui:define name="body">
			<f:view>
				<p:ajaxStatus onstart="statusDialog.show();"
					onsuccess="statusDialog.hide();" />
				<p:dialog modal="true" widgetVar="statusDialog" header="Loading"
					draggable="false" closable="false">
					<p:graphicImage
						value="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.request.contextPath}/images/ajaxloadingbar.gif" />
				</p:dialog>

				<h:form id="form">
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />
					<br />

					
					<div align="right">
						<h:commandButton image="/images/off.png" action="#{usuarioView.actionCerrarSesion}"/>
					</div>
					
					<div align="center">
						<h:link id="cmdBack" outcome="goInitialMenu" value="volver"
							style="color:blue;" />
					</div>
					
					

					<p:panel id="msgProjectUsuarioTitle"
						header="FORMULARIO DE AFILIACIÓN MEMBRESIA VrooM">
						<p:messages id="msg" showDetail="true" />
						<p:growl id="men" />


						<h:panelGrid columns="6" id="panel">

							<h:outputText id="msgAlias" value="Número Cédula" />
							<p:inputText id="txtAlias" binding="#{usuarioView.txtAlias}"
								style="width:180px">
								<p:ajax update="panel,msg,panelBotones,btnAdicionar"
									listener="#{usuarioView.listener_txtId}" />
							</p:inputText>

							<h:outputText id="msgNombre" value=" Nombre" />
							<p:inputText id="txtNombre" binding="#{usuarioView.txtNombre}"
								disabled="true" style="width:185px" />


							<h:outputText id="msgApellido" value=" Apellido" />
							<p:inputText id="txtApellido"
								binding="#{usuarioView.txtApellido}" style="width:180px"
								disabled="true" />

							<h:outputText id="msgEdad" value="Edad" />
							<p:inputText id="txtEdad" binding="#{usuarioView.txtEdad}"
								disabled="true" style="width:180px">
								<p:ajax listener="#{usuarioView.listenerEdad}"
									update="declaro,msg" />
							</p:inputText>

							<h:outputText id="msgSexo" value=" Sexo" />
							<p:selectOneMenu binding="#{usuarioView.somSexo}"
								style="width:175px" disabled="true">
								<f:selectItem itemLabel="M" itemValue="M" />
								<f:selectItem itemLabel="F" itemValue="F" />
							</p:selectOneMenu>

							<h:outputText value="Tipo Doc. Identificación" />
							<p:selectOneMenu disabled="true"
								binding="#{usuarioView.somTipoDocumentos}" style="width:175px">
								<f:selectItems value="#{usuarioView.losTiposDocumentos}" />
							</p:selectOneMenu>


							<h:outputText value="Declaro que soy mayor de edad" />

							<p:selectOneMenu id="declaro"
								binding="#{usuarioView.somDeclaraMayorEdad}" style="width:175px"
								disabled="true">
								<f:selectItem itemLabel="NO" itemValue="NO" />
								<f:selectItem itemLabel="SI" itemValue="SI" />
							</p:selectOneMenu>

							<h:outputText id="msgLugarNacimiento" value=" Lugar Nacimiento" />
							<p:inputText id="txtLugarNacimiento"
								binding="#{usuarioView.txtLugarNacimiento}" disabled="true"
								style="width:180px" />

							<h:outputText id="msgFechaNacimiento" value=" Fecha Nacimiento" />
							<p:calendar navigator="true" locale="en" showOn="button"
								binding="#{usuarioView.txtFechaNacimiento}" disabled="true"
								style="width:180px">
								<p:ajax event="dateSelect"
									listener="#{usuarioView.listener_txtFechaNacimiento}"
									update="men" />
							</p:calendar>

							<h:outputText id="msgEstadoCivil" value=" EstadoCivil" />
							<p:inputText id="txtEstadoCivil"
								binding="#{usuarioView.txtEstadoCivil}" disabled="true"
								style="width:180px" />

							<h:outputText id="msgCiudadResidencia" value="Ciudad Residencia" />
							<p:inputText id="txtCiudadResidencia"
								binding="#{usuarioView.txtCiudadResidencia}" disabled="true"
								style="width:180px" />

							<h:outputText id="msgDireccionResidencia"
								value="DireccionResidencia" />
							<p:inputText id="txtDireccionResidencia"
								binding="#{usuarioView.txtDireccionResidencia}" disabled="true"
								style="width:180px" />

							<h:outputText value="Teléfono Residencia" />
							<p:inputText binding="#{usuarioView.txtTelefonoResidencia}"
								disabled="true" style="width:180px" />


							<h:outputText id="msgTelefonoOficina" value=" Teléfono Oficina" />
							<p:inputText id="txtTelefonoOficina" disabled="true"
								binding="#{usuarioView.txtTelefonoOficina}" style="width:180px" />

							<h:outputText id="msgCelular" value=" Celular" />
							<p:inputText id="txtCelular" binding="#{usuarioView.txtCelular}"
								disabled="true" style="width:180px" />

							<h:outputText id="msgPin" value=" Pin BlackBerry" />
							<p:inputText id="txtPin" binding="#{usuarioView.txtPin}"
								disabled="true" style="width:180px" />

							<h:outputText id="msgCorreoElectronico"
								value=" CorreoElectronico" />
							<p:inputText id="txtCorreoElectronico"
								binding="#{usuarioView.txtCorreoElectronico}" disabled="true"
								style="width:180px" />



							<h:outputText id="msgNivelEducativo" value=" NivelEducativo" />

							<p:selectOneMenu binding="#{usuarioView.somNivelEducativo}"
								disabled="true" style="width:175px">
								<f:selectItem itemLabel="Primaria" itemValue="Primaria" />
								<f:selectItem itemLabel="Bachiller" itemValue="Bachiller" />
								<f:selectItem itemLabel="Técnico" itemValue="Técnico" />
								<f:selectItem itemLabel="Universitario"
									itemValue="Universitario" />
								<f:selectItem itemLabel="Posgrado" itemValue="Posgrado" />
							</p:selectOneMenu>

							<h:outputText id="msgProfesion" value="Profesión - Actividad" />
							<p:inputText id="txtProfesion"
								binding="#{usuarioView.txtProfesion}" disabled="true"
								style="width:180px" />


							<h:outputText id="msgEmpresaTrabaja"
								value="Empresa donde trabaja" />
							<p:inputText id="txtEmpresaTrabaja"
								binding="#{usuarioView.txtEmpresaTrabaja}" disabled="true"
								style="width:180px" />

							<h:outputText id="msgDireccionTrabaja"
								value="Dirección Empresa " />
							<p:inputText id="txtDireccionTrabaja"
								binding="#{usuarioView.txtDireccionTrabaja}" disabled="true"
								style="width:180px" />

							<h:outputText id="msgConocimientoMembresia"
								value=" ¿Donde conoció la Membresia VrooM?" />
							<p:inputTextarea binding="#{usuarioView.conocimientoMembresia}"
								disabled="true" style="width:180px" />

							<h:outputText id="msgMusicaPreferida" value="Música Preferida" />
							<p:inputTextarea binding="#{usuarioView.musicaPreferida}"
								disabled="true" style="width:180px" />

							<h:outputText id="msgDeportePreferido" value="Deporte Preferido" />
							<p:inputTextarea binding="#{usuarioView.txtDeportesPreferidos}"
								disabled="true" style="width:180px" />

							<h:outputText id="msgPaginasWebVisitadas"
								value="Pagina en internet que mas visita" />
							<p:inputTextarea binding="#{usuarioView.txtPaginasWeb}"
								disabled="true" style="width:180px" />


							<h:outputText id="msgArtistasVerEnvivo"
								value="Artista que quisiera ver en vivo" />
							<p:inputTextarea binding="#{usuarioView.txtArtistasVerEnVivo}"
								disabled="true" style="width:180px" />


							<h:outputText id="msgRevistasLee" value=" Revista que mas lee" />
							<p:inputTextarea binding="#{usuarioView.txtRevistasMasLee}"
								disabled="true" style="width:180px" />


						</h:panelGrid>



					</p:panel>

					<p:panel id="membresia" header="Membresía">

						<h:panelGrid columns="2">

							<p:dataTable  id="table" value="#{usuarioView.lasMembresias}"  var="var" editable="true" emptyMessage="No hay registros disponibles"  >

								<p:column headerText="Código de barras">
									<p:inputText value="#{var.numeroTarjeta}"/>
									
								</p:column>

								<p:column headerText="Tipo membresía">
									<p:selectOneMenu id="tipoMembresia" value="#{var.tipoMembresia}" style="width:175px">
										<f:selectItems value="#{usuarioView.losTiposMembresia}" />
									</p:selectOneMenu>

								</p:column>

								<p:column headerText="Fecha Final">
									<p:calendar navigator="true" locale="en"  value="#{var.fechaFin}"  />

								</p:column>

								<p:column headerText="Número contrato">
									<p:inputText  value="#{var.idContrato}" />
								</p:column>
								
								<p:column headerText="Eliminar Registro">
									<p:commandButton icon="ui-icon-trash"  action="#{usuarioView.eliminarTabla}" update ="@form">
										<f:setPropertyActionListener target="#{usuarioView.membresiaSeleccionada}" value="#{var}" />	
									</p:commandButton>
								</p:column>

							</p:dataTable>

							<p:commandButton id="btnAdicionar" binding="#{usuarioView.btnAdicionar}" disabled="true" icon="ui-icon-check" action="#{usuarioView.adicionarTabla}" update=":form:table"/>
							

						</h:panelGrid>

						

					</p:panel>

					<p:panel>
						<h:panelGrid id="panelBotones" columns="4">

							<p:commandButton id="btnSave" disabled="true" value="Guardar"
								action="#{usuarioView.action_save}"
								update="msg,panel,panelBotones,membresia" binding="#{usuarioView.btnSave}" />
							<p:commandButton id="btnModify" disabled="true" value="Modificar"
								action="#{usuarioView.action_modify}"
								update="msg,panel,panelBotones,membresia"
								binding="#{usuarioView.btnModify}" />

							<p:commandButton id="btnClear" disabled="false" value="Limpiar"
								action="#{usuarioView.action_clear}"
								update="msg,panel,panelBotones,membresia"
								binding="#{usuarioView.btnClear}" />

						</h:panelGrid>
					</p:panel>


				</h:form>
			</f:view>
		</ui:define>

		<ui:define name="footer">
			<ui:include src="/WEB-INF/facelets/footer.jspx" />
		</ui:define>
	</ui:composition>
</h:body>

</html>
